<template>
  <div class="nomal_people">

    <div id="container" class="container" />
    <div class="button"><button @click="handler()">变色</button></div>
    <div id="button"><button @click="building()">是否显示建筑 </button></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      data: '',
      style: 'amap://styles/dark',
      build: "['bg', 'road']"
      // "['bg', 'road', 'building', 'point']"
    }
  },
  watch: {
    data: function() {
      this.map()
      // this.echarts()
      console.log(this.data)
    },
    style: function() {
      this.map()
    },
    build: function() {
      this.map()
    }
  },
  created() {
    // this.map()
    this.findData()
  },
  mounted() {
    this.map()
    console.log(this.data)
  },

  methods: {
    building() {
      if (this.build === "['bg', 'road']") {
        this.build = "['bg', 'road', 'building', 'point']"
      } else {
        this.build = "['bg', 'road']"
      }
    },
    handler() {
      if (this.style === 'amap://styles/normal') {
        this.style = 'amap://styles/dark'
      } else {
        this.style = 'amap://styles/normal'
      }
    },

    findData() {
      // http://47.100.226.238:6677
      axios.get('http://47.100.226.238:6677/normal/findAllNormal').then((res) => {
        console.log(res.data.data)
        if (res.data.status === 200) {
          this.data = res.data.data
        } else {
          alert(res.data.message)
        }
      })
    },
    map() {
      // this.echarts()
      var map = new AMap.Map('container', {
        center: [116.400389, 39.93729],
        // features: ['bg', 'road', 'building', 'point'],
        features: this.build,
        // db9efe6a1745ac24b7269b862f359536
        mapStyle: this.style,
        rotation: 0,
        zoom: 11.3,
        viewMode: '3D',
        pitch: 0,
        skyColor: '#33216a'
      })

      AMap.plugin([
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.MapType'
      ], function() {
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        map.addControl(new AMap.ToolBar())

        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        map.addControl(new AMap.Scale())

        // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
        map.addControl(new AMap.MapType())
      })

      var layer = new Loca.ScatterPointLayer({
        map: map
      })
      var colors = [
        '#07E8E4',
        '#AD92D1',
        '#3346BD',
        '#EBEB8D',
        '#7FC97F'
      ]

      // 10万辆北京公共交通车辆'//a.amap.com/Loca/static/mock/traffic_110000.csv'
      // 'http://a.amap.com/Loca/static/mock/traffic_110000.csv'
      $.get(this.data, function(csv) {
        layer.setData(csv.slice(0, 10000), {
          lnglat: function(obj) {
            var value = obj.value
            return [value['lng'], value['lat']]
          },
          type: 'csv'
        })

        layer.setOptions({
          unit: 'px',
          isHotspot: true,
          style: {
            // 根据车辆类型设定不同半径
            radius: function(obj) {
              var value = obj.value
              switch (parseInt(value.type)) {
                case 3:
                  return 3
                case 4:
                  return 3
                case 41:
                  return 3
                case 5:
                  return 3
                default:
                  return 3
              }
            },
            height: 0,
            // 根据车辆类型设定不同填充颜色
            color: function(obj) {
              var value = obj.value
              switch (parseInt(value.type)) {
                case 3:
                  return colors[0]
                case 4:
                  return colors[1]
                case 41:
                  return colors[2]
                case 5:
                  return colors[3]
                default:
                  return colors[4]
              }
            },
            opacity: 1
          }
        })

        layer.render()
      })
    }
  }
}
</script>

// js代码
<style scoped>
.nomal_people{
  display: flex;
}

#container {
  margin: 0px;
  width: 1350px;
  height: 800px;
  background-color: rgb(24,36,51);
}
</style>
